<template>

  <el-form :model="form" label-width="auto" class="weather-option">
    <div class="tabs">
      <div class="tab active">天气系统</div>
    </div>
    <el-form-item label="天气" class="option-item">
      <el-select v-model="form.type" placeholder="请选择天气" size="small" placement="bottom" class="me-select">
        <el-option label="无" value="null" />
        <el-option label="雨天" value="rain" />
        <el-option label="雪天" value="snow" />
      </el-select>
    </el-form-item>

    <el-form-item label="雨滴大小" class="option-item">
      <el-input-number v-model="form.size" :min="1" :max="10" size="small" class="me-input" />
    </el-form-item>

    <el-form-item label="速度" class="option-item">
      <el-input-number v-model="form.speed" :min="1" :max="10" size="small" class="me-input" />
    </el-form-item>

    <el-form-item label="高度" class="option-item">
      <el-input-number v-model="form.height" :min="1" :max="1000" size="small" class="me-input" />
    </el-form-item>

    <el-form-item label="范围" class="option-item">
      <el-input-number v-model="form.area" :min="1" :max="1000" size="small" class="me-input" />
    </el-form-item>

    <el-form-item label="数量" class="option-item">
      <el-input-number v-model="form.number" :min="1" :max="100000" size="small" class="me-input" />
    </el-form-item>
  </el-form>
</template>

<script setup>
import { reactive, watch } from 'vue'

const form = reactive({
  type: 'null',
  size: 1,
  speed: 10,
  height: 500,
  area: 1000,
  number: 1000
})

watch(
  () => form,
  () => {
    meteor3D.changeWeather(form)
  },
  { deep: true }
)
</script>

<style scoped>
.weather-option {
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  color: white;

}

::v-deep .option-item .el-form-item__label {
  color: white;
}

.el-form-item {
  margin-bottom: 8px;
}

.me-select {
  width: 160px;
}

.me-input {
  width: 120px;
}

.tabs {
  display: flex;
  background-color: rgba(201, 201, 201, 0.1);
  margin-bottom: 15px;
}

.tab {
  flex: 1;
  padding: 10px;
  text-align: center;
  color: #fff;
  background-color: rgba(201, 201, 201, 0.1);
  border-bottom: 2px solid transparent;
}

.tab.active {
  background-color: rgba(201, 201, 201, 0.1);
}
</style>